<script setup>

import {DFT_ICONS} from "@jzl/icons";

defineProps({
  ext: Object
})

</script>

<template>
  <div
    class="ele-prop-item"
    v-if="ext"
  >
    <el-form
      ref="form"
      label-position="top"
    >
      <el-form-item label="按钮大小">
        <template #label>
          <h5>按钮大小</h5>
        </template>
        <!--<el-button-group>-->
        <el-row gutter="10">
          <el-col :span="12">
            <div
              class="jzl-button jzl-button--mini w-full mt-1 mb-1"
              @click="ext.size = 'jzl-button--mini'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.size == 'jzl-button--mini'"
              /> 迷你
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="jzl-button jzl-button--small w-full mt-1 mb-1"
              @click="ext.size = 'jzl-button--small'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.size == 'jzl-button--small'"
              /> 小号
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="jzl-button jzl-button--medium w-full mt-1 mb-1"
              @click="ext.size = 'jzl-button--medium'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.size == 'jzl-button--medium'"
              /> 中号
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="jzl-button w-full"
              @click="ext.size = ''"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.size == ''"
              /> 默认
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="jzl-button jzl-button--large w-full mt-1 mb-1"
              @click="ext.size = 'jzl-button--large'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.size == 'jzl-button--large'"
              /> 大号
            </div>
          </el-col>
        </el-row>
        <!--</el-button-group>-->
      </el-form-item>
      <el-form-item label="按钮类型">
        <template #label>
          <h5>按钮类型</h5>
        </template>
        <el-row gutter="10">
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini w-full pl-0 pr-0"
              @click="ext.type = ''"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == ''"
                width="20px"
                height="20px"
              /> 默认
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini jzl-button--primary w-full pl-0 pr-0"
              @click="ext.type = 'jzl-button--primary'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == 'jzl-button--primary'"
              /> 主要
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini jzl-button--success w-full pl-0 pr-0"
              @click="ext.type = 'jzl-button--success'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == 'jzl-button--success'"
              /> 成功
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini jzl-button--info w-full pl-0 pr-0"
              @click="ext.type = 'jzl-button--info'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == 'jzl-button--info'"
              /> 信息
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini jzl-button--warning w-full pl-0 pr-0"
              @click="ext.type = 'jzl-button--warning'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == 'jzl-button--warning'"
              /> 警告
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini jzl-button--danger w-full pl-0 pr-0"
              @click="ext.type = 'jzl-button--danger'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == 'jzl-button--danger'"
              /> 危险
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="jzl-button jzl-button--mini jzl-button--text w-full pl-0 pr-0"
              @click="ext.type = 'jzl-button--text'"
            >
              <JIcon
                :icon="DFT_ICONS.check"
                v-if="ext.type == 'jzl-button--text'"
              /> 文字
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        label="通用样式"
      >
        <template #label>
          <h5>通用样式</h5>
        </template>
        <div class="flex items-center">
          <el-switch
            v-model="ext.plain"
            active-text="朴素按钮"
            size="small"
            class="mr-5"
          />
          <el-switch
            v-model="ext.circle"
            active-text="圆角按钮"
            size="small"
          />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
